import React, { Component } from 'react'
import { HeartOutline, TruckOutline } from 'antd-mobile-icons'
import { InfiniteScroll, List } from 'antd-mobile'
import './index.scss'

export default class HomeGoodList extends Component {
  render() {
    return (
      <div className="home-items">
        <div className="hi_title">商品展示</div>
        <div className="hi_container clearfix">
          <List>
            {
              this.props.goodsList.map((item) => (
                <div className="ht_cc" key={item.id} onClick={() => this.goDeatil(item.id)}>
                  <div className="ht_cc_img"><img src={item.pic} alt={item.name} /></div>
                  <div className="ht_cc_msg">
                    <p className="ht_cc_msg_title">{item.name}</p>
                    <p className="ht_cc_msg_msg">{item.characteristic ? item.characteristic : '暂无描述'}</p>
                  </div>
                  <div className="ht_cc_shopping clearfix">
                    <span className="price">￥{item.minPrice}</span>
                    <span className="add_cart">
                      <HeartOutline color='red' onClick={(e) => this.addFavor(e,item.id)}/>
                      <TruckOutline color='red' onClick={(e) => this.addCart(e,item.id)}/>
                    </span>
                  </div>
                </div>
              ))
            }
            <InfiniteScroll loadMore={this.loadMore} hasMore={this.props.hasMore} threshold={10} />
          </List>
        </div>
      </div>
    )
  }
  // 去详情页。给父组件传递id
  goDeatil = (value) => {
    this.props.goDetail(value)
  }
  // 加载更多
  loadMore = async () => {
    await this.props.loadMore()
  }
  // 加入购物车
  addCart = (e,value) => {
    e.stopPropagation()
    this.props.addCart(value)
  }
  // 加入收藏
  addFavor = (e,value) => {
    e.stopPropagation()
    this.props.addFavor(value)
  }
}
